<template>
  <view class="youhua bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
    <view class="bg-[#e4f0e4] p-[24rpx] btops border-b border-gray-100 flex items-center justify-between" @click="$emit('toggle')">
      <text class="text-[28rpx] font-bold text-gray-800">健康属性评估</text>
      <IconFont
        :name="isExpanded ? 'arrow-up' : 'arrow-down'"
        size="12"
        color="#8bc34a"
        :class="['transition-transform duration-200', isExpanded ? 'rotate-180' : 'rotate-0']"
      />
    </view>
    <view v-show="isExpanded" class="p-[24rpx] space-y-[20rpx] transition-all duration-300">
      <text class="text-[26rpx] font-bold text-gray-800 block mb-[16rpx]">健康评估核心四大属性</text>
      
      <!-- 医疗属性 -->
      <view class="bg-blue-50 rounded-[12rpx] p-[16rpx] space-y-[12rpx]">
        <view class="flex items-center justify-between">
          <text class="text-[26rpx] font-bold text-blue-600">1. 医疗属性</text>
          <view class="flex items-center space-x-[6rpx]">
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">占比:</text>
            <nut-input 
              :model-value="formData.healthDemandAttributeOptimization?.medicalAttribute?.proportion?.toString() || '0'"
              @update:model-value="updateHealthAttributeProportion('medicalAttribute', $event)"
              type="number"
              placeholder="0"
              class="perct w-[50rpx] text-center !p-[4rpx] !text-[18rpx] !bg-white !border-green-200 !h-[32rpx] !min-h-[32rpx]"
            />
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">%</text>
          </view>
        </view>
        <ItemWithImagesCard
          :model-value="{ 
            title: '', 
            description: formData.healthDemandAttributeOptimization?.medicalAttribute?.description || '', 
            images: formData.healthDemandAttributeOptimization?.medicalAttribute?.images || [] 
          }"
          @update:model-value="(data) => updateHealthAttributeData('medicalAttribute', data)"
          :show-title="false"
          description-label="医疗属性描述"
          description-placeholder="请输入医疗属性相关描述"
          :description-rows="2"
          border-color="border-blue-300"
        />
      </view>

      <!-- 健康属性 -->
      <view class="bg-green-50 rounded-[12rpx] p-[16rpx] space-y-[12rpx]">
        <view class="flex items-center justify-between">
          <text class="text-[26rpx] font-bold text-green-600">2. 健康属性</text>
          <view class="flex items-center space-x-[6rpx]">
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">占比:</text>
            <nut-input 
              :model-value="formData.healthDemandAttributeOptimization?.healthAttribute?.proportion?.toString() || '0'"
              @update:model-value="updateHealthAttributeProportion('healthAttribute', $event)"
              type="number"
              placeholder="0"
              class="perct w-[50rpx] text-center !p-[4rpx] !text-[18rpx] !bg-white !border-green-200 !h-[32rpx] !min-h-[32rpx]"
            />
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">%</text>
          </view>
        </view>
        <ItemWithImagesCard
          :model-value="{ 
            title: '', 
            description: formData.healthDemandAttributeOptimization?.healthAttribute?.description || '', 
            images: formData.healthDemandAttributeOptimization?.healthAttribute?.images || [] 
          }"
          @update:model-value="(data) => updateHealthAttributeData('healthAttribute', data)"
          :show-title="false"
          description-label="健康属性描述"
          description-placeholder="请输入健康属性相关描述"
          :description-rows="2"
          border-color="border-green-300"
        />
      </view>

      <!-- 康复属性 -->
      <view class="bg-orange-50 rounded-[12rpx] p-[16rpx] space-y-[12rpx]">
        <view class="flex items-center justify-between">
          <text class="text-[26rpx] font-bold text-orange-600">3. 康复属性</text>
          <view class="flex items-center space-x-[6rpx]">
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">占比:</text>
            <nut-input 
              :model-value="formData.healthDemandAttributeOptimization?.rehabilitationAttribute?.proportion?.toString() || '0'"
              @update:model-value="updateHealthAttributeProportion('rehabilitationAttribute', $event)"
              type="number"
              placeholder="0"
              class="perct w-[50rpx] text-center !p-[4rpx] !text-[18rpx] !bg-white !border-orange-200 !h-[32rpx] !min-h-[32rpx]"
            />
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">%</text>
          </view>
        </view>
        <ItemWithImagesCard
          :model-value="{ 
            title: '', 
            description: formData.healthDemandAttributeOptimization?.rehabilitationAttribute?.description || '', 
            images: formData.healthDemandAttributeOptimization?.rehabilitationAttribute?.images || [] 
          }"
          @update:model-value="(data) => updateHealthAttributeData('rehabilitationAttribute', data)"
          :show-title="false"
          description-label="康复属性描述"
          description-placeholder="请输入康复属性相关描述"
          :description-rows="2"
          border-color="border-orange-300"
        />
      </view>

      <!-- 照护属性 -->
      <view class="bg-purple-50 rounded-[12rpx] p-[16rpx] space-y-[12rpx]">
        <view class="flex items-center justify-between">
          <text class="text-[26rpx] font-bold text-purple-600">4. 照护属性</text>
          <view class="flex items-center space-x-[6rpx]">
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">占比:</text>
            <nut-input 
              :model-value="formData.healthDemandAttributeOptimization?.careAttribute?.proportion?.toString() || '0'"
              @update:model-value="updateHealthAttributeProportion('careAttribute', $event)"
              type="number"
              placeholder="0"
              class="perct w-[50rpx] text-center !p-[4rpx] !text-[18rpx] !bg-white !border-purple-200 !h-[32rpx] !min-h-[32rpx]"
            />
            <text class="text-[22rpx] text-gray-600 whitespace-nowrap">%</text>
          </view>
        </view>
        <ItemWithImagesCard
          :model-value="{ 
            title: '', 
            description: formData.healthDemandAttributeOptimization?.careAttribute?.description || '', 
            images: formData.healthDemandAttributeOptimization?.careAttribute?.images || [] 
          }"
          @update:model-value="(data) => updateHealthAttributeData('careAttribute', data)"
          :show-title="false"
          description-label="照护属性描述"
          description-placeholder="请输入照护属性相关描述"
          :description-rows="2"
          border-color="border-purple-300"
        />
      </view>

      <!-- 增加+按钮 -->
      <view class="flex justify-center mt-[8rpx]">
        <nut-button 
          type="primary" 
          size="small" 
          @click="addAdditionalAttribute"
          class="!rounded-[12rpx] !bg-gradient-to-r !from-blue-500 !to-purple-500 !border-none"
        >
          <template #icon>
            <IconFont name="plus" size="14" color="#fff" />
          </template>
          增加+...占比 %
        </nut-button>
      </view>

      <!-- 额外属性列表 -->
      <view v-if="formData.healthDemandAttributeOptimization?.additionalAttributes?.length" class="space-y-[16rpx] mt-[16rpx]">
        <view 
          v-for="(attr, index) in formData.healthDemandAttributeOptimization.additionalAttributes" 
          :key="index"
          class="space-y-[12rpx] border-2 border-dashed border-gray-300 rounded-[12rpx] p-[16rpx] bg-gray-50"
        >
          <view class="flex items-center justify-between">
            <nut-input 
              :model-value="attr.name"
              @update:model-value="updateAdditionalAttributeName(index, $event)"
              placeholder="属性名称"
              class="flex-1 mr-[12rpx]"
            />
            <view class="flex items-center space-x-[6rpx]">
              <text class="text-[22rpx] text-gray-600 whitespace-nowrap">占比:</text>
              <nut-input 
                :model-value="attr.proportion.toString()"
                @update:model-value="updateAdditionalAttributeProportion(index, $event)"
                type="number"
                placeholder="0"
                class="w-[50rpx] text-center !p-[4rpx] !text-[16rpx] !h-[28rpx] !min-h-[28rpx]"
              />
              <text class="text-[22rpx] text-gray-600 whitespace-nowrap">%</text>
            </view>
            <nut-button 
              type="danger" 
              size="small" 
              @click="removeAdditionalAttribute(index)"
              class="!rounded-[8rpx] ml-[8rpx]"
            >
              <template #icon>
                <IconFont name="del" size="12" color="#fff" />
              </template>
            </nut-button>
          </view>
          <ItemWithImagesCard
            :model-value="{ 
              title: '', 
              description: attr.description || '', 
              images: attr.images || [] 
            }"
            @update:model-value="(data) => updateAdditionalAttributeData(index, data)"
            :show-title="false"
            description-label="属性描述"
            description-placeholder="请输入属性相关描述"
            :description-rows="2"
            border-color="border-gray-300"
          />
        </view>
      </view>

      <!-- 健康评估归档 -->
      <view class="mt-[24rpx] p-[16rpx] bg-gradient-to-r from-gray-50 to-blue-50 rounded-[12rpx] border border-gray-200">
        <text class="text-[24rpx] font-bold text-gray-700 block mb-[12rpx]">📋 健康评估归档处，以时间轴由近及远排序</text>
        <view v-if="formData.healthDemandAttributeOptimization?.historicalAssessments?.length" class="space-y-[8rpx]">
          <view 
            v-for="(assessment, index) in formData.healthDemandAttributeOptimization.historicalAssessments" 
            :key="index"
            class="flex items-center justify-between p-[12rpx] bg-white rounded-[8rpx] border border-gray-200"
          >
            <text class="text-[22rpx] text-gray-600">{{ assessment.date }}</text>
            <text class="text-[22rpx] text-gray-800 flex-1 ml-[12rpx]">{{ assessment.assessment }}</text>
            <nut-button 
              type="danger" 
              size="mini" 
              @click="removeHistoricalAssessment(index)"
              class="!rounded-[6rpx]"
            >
              <template #icon>
                <IconFont name="del" size="10" color="#fff" />
              </template>
            </nut-button>
          </view>
        </view>
        <view v-else class="text-center py-[20rpx]">
          <text class="text-[22rpx] text-gray-500">暂无历史评估记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import { useHealthAttributes } from '@/composables/useHealthAttributes'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const { 
  formData,
  updateHealthAttributeProportion,
  updateHealthAttributeData,
  addAdditionalAttribute,
  updateAdditionalAttributeName,
  updateAdditionalAttributeProportion,
  updateAdditionalAttributeData,
  removeAdditionalAttribute,
  removeHistoricalAssessment
} = useHealthAttributes()
</script>

<style scoped lang="scss">
.btops {
  border-top: solid 6rpx #8bc34a;
}

.youhua {
  border-top: solid 6rpx #8bc34a;
  
  :deep(.nut-input) {
    padding: 4rpx 12rpx !important;
    margin: 0 12rpx !important;
  }
}

.rotate-0 {
  transform: rotate(0deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

/* 健康需求属性优化评估输入框样式 */
:deep(.nut-input) {
  &.health-attribute-input {
    border-radius: 6rpx;
    padding: 4rpx 6rpx;
    background: white;
    border: 1px solid #e5e7eb;
    font-size: 18rpx;
    text-align: center;
    height: 32rpx;
    min-height: 32rpx;
    line-height: 1.2;
    
    &:focus {
      border-color: #3b82f6;
      background: #fff;
      box-shadow: 0 0 0 2rpx rgba(59, 130, 246, 0.1);
    }
  }
}

/* 额外属性输入框样式 */
:deep(.nut-input) {
  &.additional-attribute-input {
    border-radius: 4rpx;
    padding: 4rpx 6rpx;
    background: white;
    border: 1px solid #e5e7eb;
    font-size: 16rpx;
    text-align: center;
    height: 28rpx;
    min-height: 28rpx;
    line-height: 1.2;
    
    &:focus {
      border-color: #6b7280;
      background: #fff;
      box-shadow: 0 0 0 1rpx rgba(107, 114, 128, 0.1);
    }
  }
}
</style>
